import React from 'react';
import { connect } from 'dva';
import { Radio, Tooltip } from 'antd';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import CustomDatePicker from '@/components/CustomDatePicker';
import SaveBarChart from './components/SaveBarChart';
import style from '@/pages/IndexPage.css';
import Img1 from '../../../public/save-icon-1.png';
import Img2 from '../../../public/save-icon-2.png';
import Img3 from '../../../public/save-icon-3.png';
import Img4 from '../../../public/save-icon-4.png';
import Img5 from '../../../public/save-icon-5.png';

let infoList = [
    { title:'基准COP', value:3.51, unit:'', bg:Img1 }, 
    { title:'当前COP', value:4.19, unit:'', bg:Img2 }, 
    { title:'累计用电量', value:27.43, unit:'kwh', bg:Img3 }, 
    { title:'累计节省电量', value:38.12, unit:'kwh', bg:Img4 },
    { title:'节能率', value:10.21, unit:'%', bg:Img5 }
]
function SaveSpace({ dispatch, user, cost }){
    const { theme } = user;
    return (
        <div className={style['page-container']}>
            <div style={{ height:'40px', display:'flex' }}>
               
                <CustomDatePicker />
            </div>
            <div style={{ display:'flex', justifyContent:'space-between', height:'114px', marginBottom:'1rem' }}>
                {
                    infoList.map((item, index)=>(
                        <div key={index} style={{
                            height:'114px',
                            width:'calc( (100% - 4rem)/5 )',
                            background:'#ccc',
                            borderRadius:'6px',
                            display:'flex',
                            flexDirection:'column',
                            justifyContent:'center',
                            paddingLeft:'1rem',
                            backgroundImage:`url(${item.bg})`,
                            backgroundRepeat:'no-repeat',
                            backgroundSize:'cover',
                        }}>
                            <div style={{ color:'#000' }}>
                                <span style={{ fontSize:'2rem' }}>{ item.value }</span>
                                <span style={{ fontSize:'1rem' }}>{ item.unit }</span>
                            </div>
                            <div>
                                { item.title }
                                { 
                                item.title === '节能率' 
                                ? 
                                <Tooltip
                                    overlayStyle={{ maxWidth:340 }}
                                    title='节能率 = (当前COP - 基准COP) / 基准制冷量 X %'
                                >
                                    <ExclamationCircleOutlined style={{ marginLeft:'4px', verticalAlign:'text-bottom', fontSize:'1.2rem', color:'#1890ff' }} /> 
                                </Tooltip>
                                : 
                                null 
                            }
                            </div>
                        </div>
                    ))
                }
            </div>
            <div className={style['card-container']} style={{ height:'calc( 100% - 160px)'}}>
                <SaveBarChart />
            </div>
        </div>
    )
}

export default connect(({ user, cost })=>({ user, cost }))(SaveSpace);